<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入vue-->
    <script src="./js/vue.js"></script>
    <!--引入Element-->
    <script src="./js/index.js"></script>
    <link rel="stylesheet" href="./css/index.css">
    <!--引入axios-->
    <script src="./js/axios.min.js"></script>
    <script src="./js/request.js"></script>


    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html, body, #app {
            margin: 0px;
            padding: 0px;
        }

        html {
            width: 100%;
        }

        body {
            width: 100%;
            height: 100%;
            min-height: 550px;
            /*background: linear-gradient(to bottom right, #63cdda, #ed64a6);*/
        }

        .el-container {
            width: 100%;
            height: 100vh;
            overflow: hidden;
        }


        .el-header {
            background: linear-gradient(to bottom, #545C64, #8A948F);
            position: relative;
            overflow: hidden;
        }


        .el-aside {
            background-color: #545c64;
            color: #333;
            height: 100vh;
            overflow-x: hidden;
            overflow-y: auto;
        }


        .el-aside::-webkit-scrollbar {
            width: 0.1em; /* 设置滚动条宽度 */
        }

        .el-aside::-webkit-scrollbar-track {
            background: transparent; /* 设置滚动条背景 */
        }

        .el-aside::-webkit-scrollbar-thumb {
            background: #888; /* 设置滚动条滑块颜色 */
        }

        .el-main {
            color: #333;
            text-align: center;
            line-height: 160px;
            overflow: hidden;
            width: calc(100vw - 200px);
            transition: all 0.3s ease-in-out;
        }

        .el-main::-webkit-scrollbar {
            width: 0.1em; /* 设置滚动条宽度 */
        }

        .el-main::-webkit-scrollbar-track {
            background: transparent; /* 设置滚动条背景 */
        }

        .el-main::-webkit-scrollbar-thumb {
            background: #888; /* 设置滚动条滑块颜色 */
        }


        .el-menu-vertical-demo:not(.el-menu--collapse) {
            border: none;
        }

        .el-submenu .el-menu-item {
            min-width: 180px;
        }

        .c_iframe {
            border: 0;
        }

        .left-mian {
            font-weight: bold;
            /*width: 50vw;*/
            width: 100%;
            color: #bffff0;
            line-height: 60px;
            text-align: center;
            font-size: 30px;
        }

        .right-mian {
            position: absolute;
            top: 0;
            right: 0;
        }


    </style>


</head>
<body>
<div id="app">
    <el-container>

        <div class="left-menu">
            <el-aside width="200px">
                <div class="block" style="width: 200px;height: 60px;margin: 0;padding: 0">
                    <el-image @click="menuHandle({murl:'view/homePage.html'})"
                              src="./img/bg4.jpg"
                              lazy
                              style="width: 200px;height: 60px;z-index: 100;"></el-image>
                </div>
                <el-menu default-active="1-4-1" class="el-menu-vertical-demo"
                         background-color="#545c64"
                         text-color="#fff"
                         unique-opened
                         active-text-color="#ffd04b">
                    <!-- 遍历菜单数据 -->
                    <template v-for="items in menus">
                        <!-- 有子菜单时渲染 el-submenu -->
                        <el-submenu v-if="items.children && items.children.length > 0" :key="items.mid"
                                    :index="items.mid.toString()">
                            <template slot="title">
                                <i :class="items.icon"></i>
                                <span slot="title">{{ items.mname }}</span>
                            </template>
                            <!-- 渲染子菜单项 -->
                            <el-menu-item v-for="child in items.children" :key="child.mid"
                                          :index="items.mid +'-'+ child.mid"
                                          @click="menuHandle(child)">
                                <i :class="child.icon"></i>
                                {{ child.mname }}
                            </el-menu-item>
                        </el-submenu>
                        <!-- 没有子菜单时渲染 el-menu-item -->
                        <el-menu-item v-else :key="items.mid" :index="items.mid.toString()"
                                      @click="menuHandle(items)">
                            <i :class="items.icon"></i>
                            {{ items.mname }}
                        </el-menu-item>
                    </template>
                </el-menu>
            </el-aside>
        </div>

        <el-container>
            <el-header>
                <div class="right-mian">
                    <div style="float: right;margin-right: 10px">
                        <el-dropdown style="text-align: center">
                            <div class="avatar-box"
                                 style="height:60px;display: flex;justify-items: center;align-items: center">
                                <el-avatar style="margin-right:2px;color: #ffffff" :src="avatarUrl"></el-avatar>

                                {{username}}<i class="el-icon-arrow-down el-icon--right"></i>
                            </div>
                            <el-dropdown-menu slot="dropdown">
                                <div @click="logout">
                                    <el-dropdown-item>退出登录</el-dropdown-item>
                                </div>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                </div>
            </el-header>

            <el-main>
                <iframe
                        id="cIframe"
                        class="c_iframe"
                        name="cIframe"
                        :src="iframeUrl"
                        width="100%"
                        height="100%"
                        frameborder="0"
                        v-show="!loading"
                ></iframe>
            </el-main>

        </el-container>
    </el-container>
</div>

</body>


<script>
    let app = new Vue({
        //挂载点
        el: '#app',
        //变量区
        data() {
            return {
                //侧边菜单数据
                menus: [],
                //侧边栏状态
                isCollapse: true,
                iframeUrl: '',
                loading: true,
                timer: null,
                //用户名
                username: '',
                //头像
                avatarUrl: './img/0.jpg',
            }
        },
        //页面创建时自动调用
        created() {
            //初始化菜单
            this.findMenu();
            //设置用户进入的默认页面
            this.menuHandle({
                murl: 'view/homePage.html'
            })
            this.getUser()
        },
        //方法区
        methods: {
            //初始化所有菜单数据
            async findMenu() {
                await $axios.get('/user?m=getMenu').then(res => {
                    if (res.code === 1) {
                        this.menus = JSON.parse(res.data);
                    }
                })
            },
            //获取用户信息
            getUser() {
                //用户名
                // this.username =
                // this.avatarUrl =
            },
            //菜单切换
            menuHandle(val) {
                //加载动画
                this.loading = true
                //设置iframe(访问页面)地址
                this.iframeUrl = '/' + val.murl;
                //关闭加载动画
                this.closeLoading()
            },
            //菜单切换加载时间
            closeLoading() {
                this.timer = null
                this.timer = setTimeout(() => {
                    this.loading = false
                }, 500)
            },
            //退出登陆
            async logout() {
                await $axios.get('/user?m=logout').then(res => {
                    if (res.code === 1) {
                        this.$message.success("退出登陆")
                        window.top.location.href = '/login.html'
                    } else {
                        this.$message.error("退出登陆失败")
                    }
                })
            },
        },

    })
</script>
</html>